<template>
	 <el-container style="height: 100%;width:100%;padding:0 ;position:fixed">
	 <el-header style="width:100%;padding:0;">
	  <Navbar style="height:60px"></Navbar>
	</el-header>
	
		<el-container>
			<el-aside style="background-color: #fff; width: 75%;height: 89%; max-height: 720px; margin: 1%;  border-radius: 2%;  box-shadow:0px 0px 12px rgba(0, 0, 0, 0.12); padding: 20px ; ">
			
				<div style="height: 100%; margin-bottom: 2%;text-align: left;"  >
			 <div class="exam-container" style="padding-left:6%;" >	
				<!-- <h2 class="exam-title">{{ examTitle }}</h2> -->
				<div v-for="(question, index) in datas.data" :key="question.id" :id="'question-' + question.id">
				  <div class="question-container">
					<span class="question-number">{{ index + 1 }}.</span>
					<span class="question-q_type">{{ questionq_type[question.q_type] }}：</span>
					<span class="question-title">{{ question.content.title }}</span><span class="question-title">({{ question.points }}分)</span> <span v-for="item in question.tags"><el-tag size="small" style="margin-left: 5px;">{{item}}</el-tag></span>	
				  </div>
				  
				  <div v-if="question.q_type == '0'" class="answer-container" style="margin-bottom: 2%;">
					<el-radio-group v-model="answers[index]" size="medium" style=" text-align: left;" >
					  <el-radio :key="question.id" label="A" style="width: 100%;" >A: {{ question.content.A }}</el-radio>
					  <el-radio :key="question.id" label="B" style="width: 100%;" >B: {{ question.content.B }}</el-radio>
					  <el-radio :key="question.id" label="C" style="width: 100%;">C: {{ question.content.C }}</el-radio>
					  <el-radio :key="question.id" label="D" style="width: 100%;">D: {{ question.content.D }}</el-radio>
					</el-radio-group>
				  </div>
				  
				  <div v-if="question.q_type == '2'" class="answer-container" style="margin-bottom: 2%;">
					<el-checkbox-group v-model="answers[index]" size="medium" style=" text-align: left;">
					  <el-checkbox style="width: 100%;" label="A" >A: {{ question.content.A }}</el-checkbox>
					  <el-checkbox style="width: 100%;" label="B" >B: {{ question.content.B }}</el-checkbox>
					  <el-checkbox style="width: 100%;" label="C" >C: {{ question.content.C }}</el-checkbox>
					  <el-checkbox style="width: 100%;" label="D" >D: {{ question.content.D }}</el-checkbox>
					   <el-checkbox style="width: 100%;" label="E"  >E: {{ question.content.E }}</el-checkbox>
					</el-checkbox-group>
				  </div>
				  
				  <div v-if="question.q_type == '1'" class="answer-container">
					<textarea v-if="question.content.othercontent!=''" style="min-width: 600px;min-height:280px; max-width:600px;" disabled>{{question.content.othercontent}}</textarea>
					<el-input v-model="answers[index]" placeholder="请输入答案" style="width: 600px ;"></el-input>
				  </div>
				  
				  
				  <div v-if="question.q_type == '3'" class="answer-container">
					<el-radio-group v-model="answers[index]" size="medium">
					  <el-radio label="true">正确</el-radio>
					  <el-radio label="false">错误</el-radio>
					</el-radio-group>
				  </div>
				  
				  <div v-if="question.q_type == '4'" class="answer-container bct">
					  <textarea v-if="question.content.othercontent!=''" style="min-width: 600px;min-height:280px;" disabled>{{question.content.othercontent}}</textarea>
					<el-input v-model="answers[index]" placeholder="请输入代码答案" size="medium" type="textarea"  @keydown.enter="addNewLine"></el-input>
				  </div>
				</div>
				<div class="submit-container">
				   <el-divider content-position="right">到底啦</el-divider>
				</div>
			  </div>
				</div>	
			</el-aside>
			<el-main style="background-color: #fff; margin: 1%;  height: 89%; border-radius: 2%;   box-shadow:0px 0px 12px rgba(0, 0, 0, 0.12);">
				<h2>题目总览</h2>
				  <el-divider content-position="left">答题情况</el-divider>
				<div style="display: flex; flex-wrap: wrap; width: 230px;">
				  <div v-for="(test, index) in datas.data" :key="test.id" >
				    <div v-if="answers[index]!=''"  @click="jumpToQuestion(index)" style="margin-bottom: 2%; margin-left:4px; background-color: #2cf029; color: #fff; border: 1px solid #e8e8e8; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;" v-text="index + 1"></div>
					<div v-else @click="jumpToQuestion(index)" style=" margin-bottom: 2%;margin-left:4px;border: 1px solid #e8e8e8; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;" v-text="index + 1"></div>
				  </div>
				</div>
				<div class="submit-container">
					<el-divider content-position="left"> 提交</el-divider>
				  <el-button q_type="primary" size="medium" @click="submit" style="width: 250px;" :loading="loading">提&nbsp;&nbsp;交</el-button>
				</div>
				
				<img src="/src/assets/learn.png" alt="" style="width: 100%;margin-top: 4%;" />
				
			</el-main>
		  </el-container>
		
	</el-container>
</template>

<script lang="ts" setup>
	import Navbar from '@/components/layouts/navbar.vue';
	import { ref,reactive ,onMounted,onBeforeMount} from 'vue'
	import { useRouter,useRoute } from 'vue-router'
	import axios from 'axios'
	import {ElMessage} from 'element-plus'
	const loading = ref(false)
	const router = useRouter()
	const route = useRoute()
	const datas = reactive({
		paperid:"31444",
		time:"2023-03-23",
		status:'finished',
		form:{
			answer:[
			]
		},
		lines:2,
		data:[
			
			
		]
	})
	const addNewLine = () => {
	      this.text += "\n";
		  }
	const  jumpToQuestion = (index:any) =>{
		window.location.href='#question-' +index
	}
	const questionq_type = {
	      0: '单选题',
	      2: '多选题',
	      1: '填空题',
	      3: '判断题',
	      4: '编程题',
	    };
	const answers = ref()
	
	const submit = async () => {
		 loading.value = true
	      // 提交答案的逻辑，可以将答案保存到本地，也可以通过接口发送给后端进行评分
		  const result = [];
		  for (let i = 0; i < answers.value.length; i++) {
		    const answer = answers.value[i];
		    const questionId = datas.data[i].id;
			let xx = []
			if (typeof(answer) == typeof([]) ){
				for (let x in answer){
					xx.push(answer[x])
				}
			}
			
		    result.push({ 'question_id':questionId, 'answer': typeof(answer) != typeof([]) ? [answer]  : xx})
			
		  }
		  console.log(result)
		  const formdata = new FormData() // 创建FormData对象
		  formdata.append('answer', JSON.stringify(result)) // 添加字符串数据到FormData中
		  try {
		  	const res = await axios.post('/login/v1/examination/answer',formdata,{
		  		headers: {
		  				'TOKEN': localStorage['token']
		  		 },
		  	})
		  	const data = res.data 
		  	if (data.code== 0){
				ElMessage.success("已完成今日打卡")
				router.push('/history/all')
			}
		  } catch (error) {
		  	console.log(error)
		  }
		  setTimeout(()=>{
			  loading.value = false
		  },1000)
		  console.log(result)
	    };

	const torpl = async () =>{
		const id = route.params.id
		try {
		  const response = await axios.get('/login/v1/examination/questions?paperid='+id)
		  const data = response.data
		  if (data.code === 0) {
			  data.data.forEach((item) => {
				  item.content = JSON.parse(item.content.replace(/'/g, '"'));
				});
			const jsonData = JSON.stringify(data)
			datas.data = data.data
			answers.value = Array(datas.data.length).fill([])

		  } 
		} catch (error) {
		  console.error(error)
		}

		
	}
	onMounted(()=>{
		torpl()
	})
	
	
	
</script>

<style >
	.bct .el-textarea__inner{
		width:600px;
		min-width: 600px !important;
		min-height:280px !important;
	}
	.submit-container{
		margin: 2% 0 2% 0;
	}
</style>